<!--
 * @Author: zhangweili zhang_weili@uxsino.com
 * @Date: 2023-02-23 17:22:17
 * @LastEditors: zhangweili zhang_weili@uxsino.com
 * @LastEditTime: 2023-03-06 19:12:02
 * @FilePath: \CMS\src\views\cms\realtime-monitor\monitor6c\iceImages.vue
 * @Description: 跨线桥监测（AI摄像头）
-->
<template>
  <div class="content">

    <div class="header">
      <div class="left">
        <p>
          <span>今天：-3～9℃</span>
          <span>风向：14～25°</span>
          <span>风速：14～25m/s</span>
        </p>
      </div>
      <div class="right">
        2023-02-03   12:23:45
      </div>

    </div>
    <div class="app-container h-flex" style="padding:0;height:calc(100% - 60px)">

      <div class="app-container__right h-flex-elastic v-flex overflow-hidden">
        <div ref="main" class="v-flex-elastic">
          <div class="marin-top">
            <div class="row1">
              <el-card class="box-card">
                <div slot="header" class="clearfix" style="position:relative">
                  <img src="../../../../assets/images/3836e689c58e5ea49048f626a97192a.png" alt>
                  <span style="margin-right:7px;">现场图片</span>
                  <el-button type="primary" icon="el-icon-picture" class="right" style="position:absolute;right:10px;">摄像</el-button>
                </div>
                <div class="cardMain">
                  <!-- 轮播图 -->
                  <swiper ref="swiper" :options="swiperOptions">
                    <swiper-slide v-for="(item, index) in imgList" :key="'swiper' + index">
                      <div style="padding: 0 2px">
                        <img class="swiper-slide__img" :src="item" alt="">
                      </div>
                    </swiper-slide>
                    <div
                      slot="button-prev"
                      class="swiper-button-prev"
                      @click="buttonPrev" />
                    <div
                      slot="button-next"
                      class="swiper-button-next"
                      @click="buttonNext" />
                  </swiper>
                  <div class="swiper gallery-thumbs">
                    <div class="swiper-wrapper">
                      <div
                        v-for="(item, index) in imgList"
                        :key="'thumbs' + index"
                        class="swiper-slide"
                        :class="number == index ? 'cellActive' : ''"
                        @click="change(index)">
                        <div class="swiperImg">
                          <img class="swiper-slide__img2" :src="item" alt="">
                        </div>
                      </div>
                    </div>
                    <div slot="button-prev" class="swiper-button-prev" />
                    <div id="myNext" slot="button-next" class="swiper-button-next" />
                  </div>
                  <!-- 轮播图 -->
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import echarts from 'echarts'
import {
  Swiper,
  SwiperSlide
} from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import { getLastNumData } from '@/api/cms/monitor/tdengine'
import Queue from '@/utils/queue'
var myqueen = new Queue()
export default {
  name: 'ClassType',
  components: {
    // GeometryEditor
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      listQuery: {
        num: 10,
        interval: null,
        fieldName: null,
        type: '1',
        aggregate: null,
        dataBaseName: 'winglinks',
        tableName: '',
        startTime: null,
        endTime: null
      },
      voh_config: {
        deviceIdentification: '',
        productIdentification: '',
        deviceType: ''
      },
      number: 0,
      myqueenData: [],
      swiperOptions: {
        spaceBetween: 10, // 大轮播图间距
        navigation: {// 大轮播图的切图按钮，如果想放在轮播图中可以看swiper官方文档
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        thumbs: {
          swiper: {
            el: '.gallery-thumbs',
            slidesPerView: 6, // 缩略图显示张数
            slidesPerGroup: 6, // 缩略图每组切图张数
            spaceBetween: 10, // 缩略图间距
            slideToClickedSlide: true,
            navigation: {// 缩略图的切图按钮，如果想放在轮播图中可以看swiper官方文档
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev'
            }
          },
          autoScrollOffset: true
        }
      },
      imgList: [
      ]
    }
  },
  created() {
    // this.connectWS()
  },
  activated() {
    this.voh_config = Object.assign(this.voh_config, JSON.parse(this.$route.query.row))
    this.connectWS()
    // 绑定监听
    window.addEventListener('beforeunload', (e) => this.closeWebSocket(e))
    this.getLastData()
    // this.$nextTick(() => {
    //   thats.getcharts3(thats.newQueenData)
    // });
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    generateTableName() {
      var tableName = this.voh_config.deviceType + '_' + this.voh_config.productIdentification + '_' + 'analog_' + this.voh_config.deviceIdentification
      return tableName
    },
    getLastData() {
      this.listQuery.tableName = this.generateTableName()
      getLastNumData(this.listQuery).then(res => {
        if (res.data) {
          res.data.forEach(item => {
            if (item != null) {
              myqueen.enqueue(item)
            }
            if (myqueen.size() > 10) {
              myqueen.dequeue()
            }
            this.myqueenData = JSON.parse(JSON.stringify(myqueen.show()))
            this.imgList = []
            this.myqueenData.forEach(element => {
              this.imgList.push(element.file_path)
            })
          })
        }
      })
    },
    connectWS: function() {
      if (typeof WebSocket === 'undefined') {
        this.$message({
          type: 'warning',
          message: '当前浏览器不支持WebSocket',
          showClose: true
        })
      } else {
        const url = process.env.VUE_APP_C6_WEBSOCKET_API + this.voh_config.deviceIdentification + '?req=ok'
        this.websocket = new WebSocket(url)
        this.websocket.onopen = this.open
        this.websocket.onerror = this.error
        this.websocket.onmessage = this.message
        this.websocket.onclose = this.close
      }
    },
    open: function() {
      console.log('WebSocket Connected successfully~')
    },
    error: function(e) {
      console.log('WebSocket Error: ' + JSON.stringify(e))
    },
    message: function(msg) {
      console.log('WebSocket Message: ', msg.data)
      if (msg.data != null) {
        const data = JSON.parse(msg.data)
        console.log('data: ', data)
        console.log('fieldValue: ', data.fieldValue)
        myqueen.enqueue(data.fieldValue)
      }
      if (myqueen.size() > 10) {
        myqueen.dequeue()
      }
      this.myqueenData = JSON.parse(JSON.stringify(myqueen.show()))
      this.imgList = []
      this.myqueenData.forEach(element => {
        this.imgList.push(element.file_path)
      })
    },
    send: function(params) {
      this.websocket.send(params)
    },
    close: function() {
      console.log('WebSocket Disconnected!')
      setTimeout(() => {
        console.log('WebSocket reconnecting...')
        this.connectWS(this.thisCity)
      }, 3000)
    },
    closeWebSocket: function() {
      console.log('Closing websocket...')
      if (this.websocket) {
        this.websocket.close()
      }
    },

    // 刷新页面是关闭WebSocket连接
    beforeUnmount() {
      window.removeEventListener('beforeunload', (e) => this.closeWebSocket(e))
    },
    // banner轮播图
    buttonNext() {
      this.number = this.number + 1
      // 这里因为一些原因我找不到它原来问题，但我解决了自己问题了，这里是六张一组缩列图，当第七张的时候缩列图就该切组
      if (this.number == 6) {
        document.getElementById('myNext').click()
      }
    },
    buttonPrev() {
      this.number = this.number - 1
    },
    change(index) {
      this.number = index
    }
  }
}
</script>
<style scoped lang="scss">
 .content {
  width: 100%;
  height: 95%;
  background: #f1f4fb;
  padding: 0 20px;
  }
  .header {
    height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left{
      display: flex;
      align-items: center;
    }
  }
  /deep/.box-card {
    width: 100%;
    height: 100%;
    margin: 0 !important;
    float: none;
    background: #ffffff;
    box-shadow: 0px 0px 10px 5px rgba(0, 47, 138, 0.04);
    border-radius: 6px;
    border: 0;
  }
  .clearfix {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
  }
  .clearfix span {
    font-weight: 350;
    font-size: 18px;
    color: #061b48;
  }
  .clearfix img {
    width: 20px;
    height: 20px;
    margin-right: 7px;
  }
  .marin-top{
    margin-bottom:10px;
    width:100%;height:100%; display: flex;justify-content: space-between;
    .row1{
      width:100%;height:100%;
    }
    .row2{
      width:20.4%;height:100%;

    }
  }
  .swiper-slide {
    width: 100%;
    &__img {
      width: 100%;
      height: 600px;
    }
  }
.swiper {
  &.gallery-thumbs {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    height: 150px;
    padding: 10px 60px;
    background-color: rgb(105, 105, 105);
    &::before,
    &::after {
      z-index: 2;
      position: absolute;
      top: 0;
      content: "";
      height: 150px;
      width: 60px;
      background-color: rgb(105, 105, 105);
    }
    &::before {
      left: 0;
    }
    &::after {
      right: 0;
    }
    .swiper-button-next,
    .swiper-button-prev {
      top: 50% !important;
      transform: translateY(-50%) !important;
      width: 40px;
      height: 100px;
      margin-top: 0 !important;
      border-radius: 8px;
      color: #f3f4f4;
      background-color: rgba(0, 0, 0, 0.7);
      &::after {
        font-size: 2rem;
      }
    }
  }
  // &.gallery-thumbs .swiper-slide {
  //   opacity: 0.4;
  //   overflow: hidden;
  // }
  // &.gallery-thumbs .swiper-slide-thumb-active {
  //   border: 2px solid red;
  // }
}
.swiperImg {
  width: 171px;
  height: 120px;
}
.swiper-slide__img2 {
  height: 120px;
  width: 100%;
}
.cellActive {
  border: 2px solid red;
}
  /deep/.el-card__body {
      padding: 0;
      width: 100%;
      height: calc(100% - 60px);
      border: 0;
    }
  .cardMain{
      width: 100%;
      height: 100%;
      .right{
        padding-top:30px;
        li{
          line-height: 60px;
        }
        text-align: center;
        strong{
          font-size: 70px;
        }
        .greenTxt{
          font-size: 30px;
          color: #059b43;
        }
      }
  }
</style>
